/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
import React from 'react';
import { withRouter } from 'react-router-dom';
import style from './mysite.module.scss'
import { Dropdown, Menu, Icon, notification } from 'antd';
import { Avatar } from 'antd';
import Api from '@/api/index';
import { message } from 'antd';


class PageHead extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    componentDidMount() {
        // const socket = new WebSocket('ws://localhost:6060');
        // socket.onopen = function () {
        //     socket.send(JSON.stringify({
        //         event: 'events',
        //         data: null
        //     }))
        // }
        // socket.onmessage = function (res) {
        //     const msg = JSON.parse(res.data);
        //     if (msg.data && msg.data.length > 0) {
        //         message.success('您有新消息' + msg.data)
        //     }
        // }
        this.startWebSocket()
    }

    //实时消息
    startWebSocket() {
        let this_ = this;
        let wsUrl = 'ws://localhost:6060';//websocket接口地址
        let ws = new WebSocket(wsUrl);

        /*心跳检测：
            1.如果当前连接着（onopen或onMessage），就开始心跳检测，即设置定时器一段时间后发送一条数据，发送后再过一段时间关闭连接；
              如果在关闭之前，后端正常返回数据（会触发onMessage），会重置心跳检测就一直不会关闭连接。
            2.如果当前异常或关闭（onclose,onerror）,就重新建立连接；
        */
        let heartCheck = {
            timeout: 180000,        //3分钟发一次心跳
            timeoutObj: null,//定时器：延时发送一次心跳
            serverTimeoutObj: null,//定时器：延时检测后端是否返回数据，如返回则还连着，如未返回则后端断了
            reset: function () {
                clearTimeout(this.timeoutObj);
                clearTimeout(this.serverTimeoutObj);
                return this;
            },
            start: function () {
                let this_ = this;
                this.timeoutObj = setTimeout(function () {
                    ws.send("peng");
                    console.log("peng");
                    this_.serverTimeoutObj = setTimeout(function () {//如果超过一定时间还没重置，说明后端主动断开了
                        ws.close();     //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                    }, this_.timeout)
                }, this.timeout)
            }
        };

        ws.onclose = function () {
            this_.reConnect(wsUrl);//重新连接
            console.log("连接已关闭 " + new Date());
        };
        ws.onerror = function () {
            this_.reConnect(wsUrl);//重新连接
            console.log("连接异常 " + new Date());
        };
        ws.onopen = function () {
            heartCheck.reset().start();//开始心跳检测
            console.log("连接成功 " + new Date());
        };
        ws.onmessage = function (e) {
            heartCheck.reset().start();//开始心跳检测
            let data = JSON.parse(e.data);
            console.log(data)
            this_.onMessageNotice(data);//获取到数据的回调
        };


    }

    //重新连接websocket
    reConnect(url) {
        let this_ = this;
        if (this.lockReconnect) return;
        this.setState({
            lockReconnect: true//上锁
        });
        setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
            this_.startWebSocket(url);
            this_.setState({
                lockReconnect: false//开锁
            });
        }, 5000);
    }
    //收到消息的回调
    onMessageNotice() {
        console.log(1111)
        notification.info({//antd 中的组件
            message: "这是一条消息",
            description: "消息描述",
        });
    }


    //个人中心
    userInfo = () => {
        this.props.history.push({ pathname: '/' })
    }
    //修改用户密码
    modifyPwd = () => {

    }
    //退出登录
    loginout = () => {
        Api.loginout().then(res => {
            if (res.code == 200) {
                window.localStorage.clear();
                this.props.history.push({ pathname: '/login' })
            }
        })
    }

    render() {
        const menu = (<Menu>
            <Menu.Item>
                <div onClick={this.userInfo}>
                    个人中心
                </div>
            </Menu.Item>
            <Menu.Item>
                <div onClick={this.modifyPwd}>
                    修改密码
                </div>
            </Menu.Item>
            <Menu.Item>
                <div onClick={this.loginout}>
                    退出登录
                </div>
            </Menu.Item>
        </Menu>)
        return (
            <div className={style.rt_cont}>
                <ul>
                    <li>
                        <Dropdown overlay={menu}>
                            <a style={{ display: 'block' }} onClick={e => e.preventDefault()}>
                                <Avatar className={style.avatar}
                                    src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                <span className={style.username}>小赫兹</span>
                                <Icon type="down" />
                            </a>
                        </Dropdown>
                    </li>
                </ul>
            </div>
        )
    }
}

export default withRouter(PageHead)
